<template>
  <div>
    <div class="uploadbox">
      <input type="file" accept="image/*" @change="onFileChange">
      <img :src="UpImg" />
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import api from '../fetch/api'
  export default {
    data: function () {
      return {
        deleImg: '',
        UpImg: 'http://upfile.nbbaijin.com/upload/20180427/46cfe6af17014240862d8bedcbfba4de.jpg',
      }
    },
    methods: {
      //图片点击
      onFileChange: function (e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        this.createImage(files, e);
      },
      //创建图片
      createImage: function (file, e) {
        const vm = this;
        lrz(file[0]).then(function (rst) {
          let urlimg = rst.base64;
          vm.UpImg=rst.base64
          urlimg = urlimg.split(',')[1]
          api.UploadURl({
            ImgData: urlimg
          }).then(res => {
            if(res.Success){
              vm.$emit("imgbase", res.Infor)
            }else{
            }
          })
          return rst;
        }).always(function () {
          // 清空文件上传控件的值
          e.target.value = null;
        });
      },
    }
  }

</script>
<style scpoed>
  .uploadbox {
    position: relative;
  }

  .uploadbox input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .uploadbox img {
    width: 42vw;
    height: 28vw;
    border-radius: 3px;
  }

</style>
